<template>
    <div class="com-container">
        <!-- 柱状图 -->
        <div ref="chartDom" class="com-chart"></div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator';
import * as echarts from 'echarts';

@Component({
    name: 'BarChart',
})
export default class BarChart extends Vue {
    @Prop() data;
    chartInstance: any = null;

    @Watch('data', { immediate: true, deep: true })
    onWatchData(newData) {
        if (newData) {
            let that = this;
            this.$nextTick(() => {
                that.updateChart(newData);
            });
        }
    }

    mounted() {
        this.initChart();
    }

    initChart() {
        this.chartInstance = echarts.init(this.$refs.chartDom);
        const initOption = {
            legend: {
                bottom: -4,
                selectedMode: false,
            },
            tooltip: {},

            grid: {
                top: 30,
                bottom: '23%',
                // width: '88%', // 宽度
                // height: '75%', // 高度
                left: 40,
                right: -15,
            },
            xAxis: {
                type: 'category',
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { show: false, color: 'rgb(128, 128, 128)' },
            },
            yAxis: { axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { color: '#eee' } } },
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                { type: 'bar', color: '#feb580', barWidth: '25%' },
                { type: 'bar', color: '#3c7786', barWidth: '25%' },
            ],
        };
        this.chartInstance.setOption(initOption);
    }
    updateChart(e) {
        const dataOption = {
            dataset: {
                dimensions: ['product', '重点指标', '80%调整期'],
                source: e,
            },
        };
        this.chartInstance.setOption(dataOption);
    }
    screenAdapter() {
        const titleFontSize = ((this.$refs.chartDom as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    barWidth: titleFontSize,
                },
            ],
        };
        this.chartInstance.setOption(adapterOption);
        this.chartInstance.resize();
    }

    destroyed() {
        // window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>

<style scoped>
.com-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.com-chart {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
